<template>
    <div class="person_comments">
        <div class="person">
            <div class="person_msg">
                <div class="person_avatar">
                    <img src="@/assets/logo.png">
                </div>
                <div class="person_name">
                    <p>{{mydata.nickname}}</p>
                    <p>{{mydata.createTime | time}}</p>
                </div>
            </div>
            <div class="person_content">
                <p>{{mydata.content}}</p>
                <span @click="replay(mydata.id)">回复</span>
            </div>
        </div>
        <!-- 回复 -->
        <replay :id="mydata.blogId" :replayId="mydata.id" @getComments="getComments" v-if="isShow"></replay>
        <!-- 子评论 -->
        <subComment v-for="(item) in mydata.replycomments" :key="item.id" :mydata="item"
            @getComments="getComments" 
            @hideReply="$emit('hideReply')"
            @showReply="$emit('showReply')"></subComment>
    </div>
</template>

<script>
  import replay from '@/components/front/home/replay.vue'
  import subComment from '@/components/front/home/subComment.vue'
  export default {
    components:{
      replay,
      subComment
    },
    props:{
        mydata:{
            type:Object
        }
    },
    data(){
        return {
            isShow:false
        }
    },
    created(){

        
    },
    methods:{
        async replay(id){
            this.isShow = !this.isShow
            if(this.isShow){
                this.$emit('hideReply')
            }else{
                this.$emit('showReply')
            }
        },
        getComments(){
            this.$emit('getComments')
            this.isShow = false
        }
    }
  }
</script>

<style scoped>
  .person_msg{
      overflow: hidden;
  }
  .person_avatar{
      float:left;
  }
  .person_avatar img{
      height:30px;
      width:30px;
      border:1px solid #ccc;
      border-radius: 5px;
  }
  .person_name{
      float:left;
      margin-left:20px;
      font-size:0.8rem;
  }
  .person_content{
      margin-left:60px;
  }
  .person_content p{
      padding-bottom:10px;
      padding-top:10px;
  }
  .person_content span{
    background-color: #7fb442;
    color:white;
    border-radius:5px;
    width:50px;
    height:20px;
    cursor:pointer;
    text-align:center;
    line-height:20px;
    font-size:0.8rem;
    display:inline-block;
  }
</style>